<template>
  <!--底部-->
  <div style="margin-top: 40px;">
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" @click="$router.push('/')">首页</van-tabbar-item>
      <van-tabbar-item icon="search" @click="$router.push('/search')">搜索</van-tabbar-item>
      <van-tabbar-item icon="bill" @click="$router.push('/order')">订单</van-tabbar-item>
      <van-tabbar-item icon="manager-o" @click="$router.push('/personal')">我的</van-tabbar-item>
    </van-tabbar>
  </div>

</template>

<script>

</script>


<style scoped lang="scss">

@import "../../style/mixins.scss";
@import "../../style/viriables.scss";

/*底部 */
/*默认选中首页时，首页图标显示蓝色*/
.docker-item-active {
  color: #38a038;
}
.docker {
  display: flex;
  width: 100%;
  height: 49px;
  border-top: 1px solid #ccc;
  position: absolute;
  bottom: 0px;
  &-item {
    flex: 1;
    text-align: center;
    .iconfont {
      margin: 5px 0 1px 0;
      font-size: 15px;
    }
    &-title {
      font-size: 15px;
      transform: scale(0.5, 0.5);
      transform-origin: center top;
    }
  }
}
</style>
